<!--
 * @Description: file content
 * @Author: tangyanqing
 * @Date: 2021-09-13 17:38:04
 * @LastEditors: tangyanqing
 * @LastEditTime: 2021-09-14 17:52:46
-->
<template>
<view class="login-content">
  <view class="head">
    <image class="title-img" mode="aspectFit" src="../../static/images/login-title.png" @error="imageError"></image>
    <text class="title">指挥调度融合通讯系统</text>
    <view class="line-bottom"></view>
  </view>
  <view class="input-content">
    <text class="title">{{inputType == 'user' ? '账号登录' : '短信验证码登录'}}</text>
    <view class="form">
        <uni-forms :modelValue="formData">
          <view class="item-li">
            <uni-forms-item label="" name="user" label-width="0">
                <image class="user-icon" mode="aspectFit" src="../../static/images/user-icon.png" @error="imageError"></image>
                <uni-easyinput type="text" v-model="formData.user" placeholder="请输入账号" />
            </uni-forms-item>
          </view>
          <view class="item-li" v-if="inputType == 'user'">
            <uni-forms-item label="" name="password" label-width="0">
                <image class="password-icon" mode="aspectFit" src="../../static/images/password-bg.png" @error="imageError"></image>
                <uni-easyinput v-model="formData.password" placeholder="请输入密码" type='password' />
            </uni-forms-item>
          </view>
          <view class="item-li code-li" v-if="inputType == 'code'">
            <uni-forms-item label="" name="code" label-width="0">
                <image class="code-icon" mode="aspectFit" src="../../static/images/code-icon.png" @error="imageError"></image>
                <uni-easyinput v-model="formData.code" placeholder="请输入验证码" type='number' />
            </uni-forms-item>
            <text class="code-btn" @click="sendCode" v-if="codeType == 0">发送验证码</text>
            <text class="code-btn code-btn-disbaled" v-if="codeType == 1"><text class="blue">{{count}}</text>秒后再试</text>
          </view>
        </uni-forms>
        <button class="submit" @click="submitForm">登录</button>
        <view class="operator">
          <view>
            <label>
              <checkbox value="cb" checked="true" class="uni-checkbox" />记住密码
            </label>
          </view>
          <view>
            <image class="help-icon" mode="aspectFit" src="../../static/images/help-icon.png" @error="imageError"></image>
            忘记密码
          </view>
        </view>
    </view>
    <view class="split-line">
      <view class="first"></view>
      <text class="text">或</text>
      <view class="second"></view>
    </view>
    <view class="change-content" @click="changeContent">{{inputType == 'user' ? '短信验证码登录' : '账号登录'}}</view>
  </view>
</view>
</template>
<script>
export default {
  data() {
			return {
        formData: {
          user: '',
          passWord: '',
          code: ''
        },
        inputType: 'user',
        isRememberPassword: false,
        timer: null,
        count: 60,
        codeType: 0
      }
  },
  watch:{
    count(newVal){
      if(newVal == 0) {
        clearInterval(this.timer)
        this.codeType = 0
        this.count = 60
      }
    }
  },
  methods: {
    changeContent() {
      this.formData.user = ''
      if (this.inputType == 'user') {
        this.inputType = 'code'
        this.formData.passWord = ''
      }else {
        this.inputType = 'user'
        this.formData.code = ''
      }
    },
    submitForm() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    sendCode() {
      this.codeType = 1
      this.timer = setInterval(() => {
        this.count--
      }, 1000);
    }
  }
}
</script>
<style lang="scss" scoped>
.login-content {
  background: url('../../static/images/login-bg.png') bottom;
  height: 100vh;
  background-size: cover;
  .head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    padding: 194rpx 0 144rpx 0;
    font-size: 40rpx;
    color: #fff;
    .title-img {
      display: block;
      width: 533rpx;
      height: 78rpx;
    }
    .title {
      padding: 26rpx 0;
    }
    .line-bottom {
      background: #fff;
      width: 71rpx;
      height: 5rpx;
    }
  }
  .input-content {
    color: #fff;
    padding: 0 56rpx;
    .title {
      font-weight: 600;
      font-size: 46rpx;
      text-align: left;
    }
    .code-li {
      // border-bottom: 1px solid rgba(255, 255,255,0.8);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
    .user-icon {
      width: 32rpx;
      height: 35rpx;
    }
    .password-icon {
      width: 32rpx;
      height: 38rpx;
    }
    .code-icon {
      width: 36rpx;
      height: 33rpx;
    }
    .submit {
      margin-top: 48rpx;
      font-size: 38rpx;
      color: #3294ff;
      box-shadow: 0px 4px 16px rgba(34, 0, 152, 0.5);
    }
    .code-btn {
      width: 224rpx;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      border-radius: 8rpx;
      background: transparent;
      border: 1px solid #fff;
      font-size: 34rpx;
      margin-left: 32rpx;
    }
    .code-btn-disbaled {
      width: 244rpx;
      height: 96rpx;
      border-radius: 8rpx;
      background: #f5f5f5;
      color: #2b2b2b;
      .blue {
        color: #1568ED;
        font-size: 36rpx;
        margin-right: 10rpx;
      }
    }
  }
  .operator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    margin-top: 49rpx;
  }
  .split-line {
    font-size: 24rpx;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 146rpx 0 46rpx 0;
    .text {
      width: 48rpx;
      height: 26rpx;
      line-height: 26rpx;
    }
    .first {
      width: calc(50% - 20rpx);
      height: 1px;
      background: #eee;
    }
    .second {
      width: calc(50% - 20rpx);
      height: 1px;
      background: #eee;
    }
  }
  .change-content {
    font-weight: 600;
    font-size: 36rpx;
    text-align: center;
  }
  .help-icon {
    width: 24rpx;
    height: 24rpx;
    vertical-align: middle;
    margin-right: 16rpx;
  }
  .form {
    /deep/ .uni-easyinput__content-input,
    /deep/ .uni-input-placeholder {
      font-size: 34rpx;
      color: rgba($color: #fff, $alpha: 0.8);
    }
    .uni-checkbox {
      /deep/ .uni-checkbox-input {
        width: 18rpx;
        height: 18rpx;
        background-color: transparent;
        color: #fff !important;
        border: 2px solid #fff;
        opacity: 0.8;
        margin-right: 12rpx;
        vertical-align: middle;
      }
      &:not([disabled]) /deep/ .uni-checkbox-input:hover {
        border-color: #fff;
      }
      /deep/ .uni-checkbox-input.uni-checkbox-input-checked:before {
        font-size: 18rpx;
        transform:translate(-50%,-60%) scale(.7)
      }
    }
  }
}
</style>
